<template>
  <div class="container">
    <div class="top">
      <div class="top-left">更便宜！更好用的网上购物平台</div>
      <div class="top-right" style="width: 300px;height: 30px;margin-top: 30px;margin-right: -530px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/user/person' }">个人中心</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/user/order'}">我的订单</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="top_middle">
        <span v-if="data.user!=null"> 您好   {{ data.user.nickname }} </span>
        <el-button v-if="data.user===null"  style="margin-left:15px "  type="text" @click="router.push('/login')">登录/注册</el-button>
        <el-button v-if="data.user!=null" style="margin-left:15px "  type="text" @click="router.push('/login')">退出登录</el-button>

      </div>
    </div>
    <div class="search-bar card">
      <el-select
          v-model="data.selectedCategory"
          placeholder="Select"
          size="large"
          style="width: 240px"
          @change="selectByCategory"

      >
        <el-option
            v-for="item in categories"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <el-input placeholder="商品名" v-model="data.search_title"></el-input>
      <el-button type="primary" @click="load">搜索</el-button>
    </div>
    <div class="middle card">
      <el-row gutter="20">
        <el-col :span="6" v-for="item in data.items" :key="item.id">
          <el-card class="box-card" @click="goToDetail(item.id)">
            <!-- 商品图片 -->
            <div class="image-container">
              <img :src="item.image" alt="商品图片" class="product-image"/>
            </div>
            <!-- 商品名称 -->
            <div class="product-name">
              <h3>{{ item.title }}</h3>
            </div>
            <!-- 商品价格 -->
            <div class="product-price">
              <p>价格：￥{{ item.price }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="card">
        <el-pagination
            v-model:current-page="data.currentPage"
            v-model:page-size="data.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="data.total"
            :page-sizes="[10, 20, 50, 100]"
            background
            @size-change="load"
            @current-change="load"
        />
      </div>
    </div>

  </div>
</template>
<script setup>
import '@/assets/css/Home.css'
import {reactive} from "vue";
import request from "@/utils/request.js";
import router from "@/router/index.js";

const categories = [
  {value: 0, label: "全部"},
  {value: 1, label: "文具"},
  {value: 2, label: "手机"},
  {value: 3, label: "电脑"},
  {value: 4, label: "食物"},
  {value: 5, label: "化妆品"},
  {value: 6, label: "服饰"}
]
const data = reactive({
  items: [],
  currentPage: 1,
  pageSize: 8,
  total: 0,
  user: {},
  selectedCategory: 0,
  search_title: "",
})
const selectByCategory = () => {
  if (data.selectedCategory !== 0) {
    request.get("/item/selectPageByCid", {
      params: {
        currentPage: data.currentPage,
        pageSize: data.pageSize,
        cid: data.selectedCategory
      }
    }).then(res => {
      if (res.code === 200) {
        console.log(res);
        data.items = res.data.list;
        data.total = res.data.total;
        data.user = JSON.parse(localStorage.getItem("user_information"));
      }
    })
  } else {
    load()
  }
}
const load = () => {
  request.get("/item/selectPage", {
    params: {
      currentPage: data.currentPage,
      pageSize: data.pageSize,
      title: data.search_title
    }
  }).then(res => {
    if (res.code === 200) {
      console.log(res);
      data.items = res.data.list;
      data.total = res.data.total;
      data.user = JSON.parse(localStorage.getItem("user_information"));
    }
  })
}
const goToDetail = (id) => {
  location.href = '/itemDetail/' + id;
}
load()
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}

.box-card:hover {
  background-color: #f5f5f5; /* 鼠标悬停时的背景色 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 鼠标悬停时的阴影 */
}

.image-container {
  text-align: center;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.product-name {
  text-align: center;
  margin-top: 10px;
}

.product-price {
  text-align: center;
  margin-top: 10px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin: 20px auto;
  width: 90%;
  height: 50px;
}

.el-select {
  margin-right: 10px;
}

.el-input {
  margin-right: 10px;
  flex-grow: 1;
}
</style>